<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>仙女散花</title>
    <link rel="stylesheet" href="./style.css" />
    <script src="./anime.js"></script>
    <!-- https://cdn.bootcdn.net/ajax/libs/animejs/3.2.2/anime.js -->
  </head>
  <body>
    <div class="container"></div>
  </body>
</html>
<script>
  // 获取容器元素
  const container = document.querySelector('.container')

  // 创建10x20的网格块
  for (let i = 0; i < 10; i++) {
    for (let j = 0; j < 20; j++) {
      const block = document.createElement('div')
      // 设置每个块的位置，以5vw为单位进行排列
      block.style.left = `${j * 5}vw`
      block.style.top = `${i * 5}vw`
      // 设置背景图片位置，创建拼图效果
      block.style.backgroundPosition = `-${j * 5}vw -${i * 5}vw`
      block.classList.add('block')
      container.appendChild(block)
    }
  }

  // 获取所有创建的块元素
  const blocks = document.querySelectorAll('.container .block')

  // 创建动画时间轴
  let animation = anime.timeline({
    targets: blocks, // 动画目标元素
    easing: 'easeInOutSine', // 缓动函数
    delay: anime.stagger(10, {
      // 每个元素延迟10ms开始动画
      start: 50 // 整体延迟50ms开始
    }),
    loop: true // 循环播放
  })

  // 添加动画序列
  animation
    .add({
      scale: 0, // 缩放到0
      translateX: () => anime.random(360, 2100), // 随机X轴位移
      translateY: () => anime.random(360, -2100), // 随机Y轴位移
      rotate: () => anime.random(-360, 360), // 随机旋转角度
      duration: () => anime.random(500, 3000) // 随机动画持续时间
    })
    .add({
      scale: 1, // 恢复原始大小
      translateX: 0, // 恢复原始X位置
      translateY: 0, // 恢复原始Y位置
      rotate: 0, // 恢复原始角度
      duration: () => anime.random(500, 3000) // 随机动画持续时间
    })
</script>
